<template>
	<view>
		<home v-if="pageCur=='home'"></home>
    <category v-if="pageCur=='category'"></category>
    <about v-if="pageCur=='about'"></about>
    <view class="cu-bar tabbar bg-white shadow foot">
			<view class="action" @click="NavChange" data-cur="home">
				<view class='icon-cu-image'>
          <text class="lg" :class="[homeIconCls, homeIconColorCls]">
          </text>
				</view>
				<view :class="pageCur=='home'?'text-red':'text-gray'">首页</view>
			</view>
			<view class="action" @click="NavChange" data-cur="category">
				<view class='icon-cu-image'>
          <text class="lg" :class="[cateIconCls, cateIconColorCls]">
          </text>
				</view>
				<view :class="pageCur=='category'?'text-orange':'text-gray'">分类</view>
			</view>
			<view class="action" @click="NavChange" data-cur="about">
				<view class='icon-cu-image'>
          <text class="lg" :class="[aboutIconCls, aboutIconColorCls]">
          </text>
				</view>
				<view :class="pageCur=='about'?'text-green':'text-gray'">关于</view>
			</view>
		</view>
	</view>
</template>

<script>
  import home from '../home/home.vue'
  import category from '../category/category.vue'
  import about from '../about/about.vue'
	export default {
    components: {
      home, category, about
    },
		data() {
			return {
				pageCur: 'home'
			}
		},
    computed: {
      homeIconCls () {
        return 'icon-home' + (this.pageCur == 'home'?'fill':'')
      },
      homeIconColorCls () {
        return 'text-' + (this.pageCur == 'home'?'red':'gray')
      },
      cateIconCls () {
        return 'icon-circle' + (this.pageCur == 'category'?'fill':'') 
      },
      cateIconColorCls () {
        return 'text-' + (this.pageCur == 'category'?'orange':'gray')
      },
      aboutIconCls () {
        return 'icon-people' + (this.pageCur == 'about'?'fill':'')
      },
      aboutIconColorCls () {
        return 'text-' + (this.pageCur == 'about'?'green':'gray')
      }
    },
    methods: {
			NavChange: function(e) {
				this.pageCur = e.currentTarget.dataset.cur
			}
		}
	}
</script>

<style>

</style>
